<template>
	<view class="cart">
		<view class="cart-list">
			<view class="cart-item" v-if="cartList.length>0">
				<!-- <label class="store">
					<radio class="radio" color="#026d44" />
					自营平台
				</label> -->
				<view class="goods" v-for="(item, index) in cartList" :key="index">
					<radio class="radio" color="#026d44" />
					<image class="thumb" src=""></image>
					<view class="info">
						<view class="name">{{item.goods_name}}</view>
						<view class="attrs">
							{{item.spec_key_name}}，{{item.goods_num}}个
							<uni-icons type="down" color="#909399"></uni-icons>
						</view>
						<view class="other">
							<text class="price">￥{{item.sale_price}}</text>
							<uni-number-box></uni-number-box>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<c-empty icon-name="cart"></c-empty>
			</view>
		</view>

		<view class="tool-bar">
			<view class="inner">
				<label class="all">
					<radio class="radio" color="#026d44" />
					全选
				</label>
				<view class="total-price">
					共计：
					<text class="amount">￥{{totalAmount}}</text>
				</view>
				<c-button type="warning" round @click="pageRoute">结算</c-button>
				<!-- <c-button type="error" rounde>删除</c-button> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		cartList: [],
		isMore: false,
		totalAmount: '0.00'
	});

	onLoad((opt) => {});

	onShow(() => {
		//登录过期自动登录
		console.log('登录状态', checkLogin());
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			getCartList();
		}
	});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
		if (state.isMore) {
			getCartList();
		}
	});

	function getCartList() {
		request.get('cart/list', {
			skip: state.cartList.length,
		}).then(res => {
			console.log('Cart', res);
			state.isMore = res.data.is_more;
			if (state.cartList.length == 0) {
				state.cartList = res.data.data;
			} else {
				state.cartList.concat(res.data.data);
			}
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		themeColor,
		cartList,
		isMore,
		totalAmount,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}

	.cart {
		padding-bottom: calc(98rpx + env(safe-area-inset-bottom));

		.cart-list {
			padding: $margin-24 $margin-24 0;

			.radio {
				transform: scale(0.8);
			}

			.cart-item {
				margin-bottom: $margin-24;
				background-color: $bg-inverse-color;
				border-radius: $radius-12;

				.store {
					display: flex;
					align-items: center;
					padding: $margin-24 $margin-24 0;
				}

				.goods {
					@include f-between;
					padding: $margin-24;

					.thumb {
						width: 168rpx;
						height: 168rpx;
						background-color: $bg-color;
						border-radius: $radius-8;
					}

					.info {
						flex: 1;
						position: relative;
						height: 168rpx;
						margin-left: $margin-24;

						.name {
							@include ellipsis;
							color: $main-color;
						}

						.attrs {
							@include ellipsis;
							display: inline-block;
							margin-top: $margin-12;
							padding: 0.2em 0.8em;
							background-color: $bg-color;
							border-radius: $radius-half;
							font-size: $font-20;
							color: $tips-color;
						}

						.other {
							@include f-between;
							position: absolute;
							width: 100%;
							bottom: 0;

							.price {
								color: $error-color;
							}
						}
					}
				}
			}
		}

		.tool-bar {
			position: fixed;
			/* #ifdef H5 */
			bottom: var(--window-bottom);
			/* #endif */
			/* #ifndef H5 */
			bottom: 0;
			/* #endif */
			left: 0;
			z-index: 9;
			width: 100%;
			padding-bottom: env(safe-area-inset-bottom);
			background-color: $bg-inverse-color;
			box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);

			.inner {
				@include f-between;
				height: 98rpx;
				padding: 0 $margin-24;

				.all {
					@include f-center;
					font-size: $font-24;

					.radio {
						transform: scale(0.8);
					}
				}

				.total-price {
					flex: 1;
					padding: 0 $margin-24;
					text-align: right;

					.amount {
						font-size: $font-36;
						color: $error-color;
					}
				}

				.c-button {
					margin: 0;
					min-width: 180rpx;
				}
			}
		}
	}
</style>